<script setup>
import { ref, reactive, watch, computed } from 'vue';
import ActivityChart from '../components/visualization/ActivityChart.vue';
import TrendChart from '../components/visualization/TrendChart.vue';
import IntensityChart from '../components/visualization/IntensityChart.vue';
import LocationChart from '../components/visualization/LocationChart.vue';
import StatsSummary from '../components/visualization/StatsSummary.vue';
import DateRangePicker from '../components/visualization/DateRangePicker.vue';
import UserList from '../components/visualization/UserList.vue';
import PlatformStats from '../components/visualization/PlatformStats.vue';
import AuthButton from '../components/AuthButton.vue';

// 当前选中的用户ID (为空时表示展示全部用户数据)
const selectedUserId = ref('');

// 日期范围
const dateRange = reactive({
  startDate: '2023-10-01',
  endDate: new Date().toISOString().split('T')[0]
});

// 数据视图类型
const activeDataView = ref('platform'); // platform, overview, trends, intensity, locations

// 活动类型图表
const activeChartType = ref('distance');
const chartTypes = [
  { value: 'distance', label: '运动距离' },
  { value: 'duration', label: '运动时长' },
  { value: 'calorie', label: '卡路里消耗' }
];

// 趋势图表
const activeTrendType = ref('distance');
const trendTypes = [
  { value: 'distance', label: '距离趋势' },
  { value: 'duration', label: '时长趋势' },
  { value: 'calorie', label: '卡路里趋势' }
];

// 训练强度图表
const activeIntensityType = ref('pie');
const intensityTypes = [
  { value: 'pie', label: '饼图' },
  { value: 'gauge', label: '仪表盘' }
];

// 位置分布图表
const activeLocationView = ref('count');
const locationViews = [
  { value: 'count', label: '次数' },
  { value: 'distance', label: '距离' },
  { value: 'duration', label: '时长' },
  { value: 'calorie', label: '卡路里' }
];

// 导航选项
const navOptions = [
  { value: 'platform', label: '平台总览', icon: '👥' },
  { value: 'overview', label: '数据总览', icon: '📊' },
  { value: 'trends', label: '趋势分析', icon: '📈' },
  { value: 'intensity', label: '强度分布', icon: '❤️' },
  { value: 'locations', label: '位置分析', icon: '📍' }
];

// 切换数据视图
const changeDataView = (view) => {
  activeDataView.value = view;
};

// 切换图表类型
const changeChartType = (type) => {
  activeChartType.value = type;
};

const changeTrendType = (type) => {
  activeTrendType.value = type;
};

const changeIntensityType = (type) => {
  activeIntensityType.value = type;
};

const changeLocationView = (type) => {
  activeLocationView.value = type;
};

// 更新日期范围
const updateDateRange = (newRange) => {
  dateRange.startDate = newRange.startDate;
  dateRange.endDate = newRange.endDate;
};

// 选择用户
const selectUser = (userId) => {
  selectedUserId.value = userId;
  // 如果选择了具体用户，切换到数据总览
  if (userId && activeDataView.value === 'platform') {
    activeDataView.value = 'overview';
  }
};

// 计算页面标题
const pageTitle = computed(() => {
  if (!selectedUserId.value) {
    return '运动数据大屏 - 全平台数据';
  }
  return `运动数据分析 - 用户${selectedUserId.value.substring(4)}`;
});
</script>

<template>
  <div class="dashboard-container">
    <!-- 侧边导航栏 -->
    <nav class="dashboard-nav">
      <div class="nav-header">
        <div class="logo">KEEP</div>
        <div class="auth-container">
          <AuthButton />
        </div>
        <div class="date-picker-wrapper">
          <DateRangePicker 
            :startDate="dateRange.startDate"
            :endDate="dateRange.endDate"
            @update-range="updateDateRange"
          />
        </div>
      </div>
      
      <div class="nav-menu">
        <div 
          v-for="option in navOptions" 
          :key="option.value"
          class="nav-item"
          :class="{ active: activeDataView === option.value }"
          @click="changeDataView(option.value)"
        >
          <span class="nav-icon">{{ option.icon }}</span>
          <span class="nav-label">{{ option.label }}</span>
        </div>
      </div>
      
      <div class="nav-user-selection">
        <UserList 
          :selectedUserId="selectedUserId"
          :dateRange="dateRange"
          @select-user="selectUser"
        />
      </div>
    </nav>
    
    <!-- 主内容区域 -->
    <main class="dashboard-main">
      <div class="dashboard-header">
        <h1>{{ pageTitle }}</h1>
        <div class="dashboard-controls">
          <DateRangePicker 
            :startDate="dateRange.startDate"
            :endDate="dateRange.endDate"
            @update-range="updateDateRange"
          />
        </div>
      </div>
      
      <!-- 平台总览视图 -->
      <div v-if="activeDataView === 'platform'" class="data-view platform-view">
        <PlatformStats :dateRange="dateRange" />
      </div>
      
      <!-- 数据总览部分应该显示ActivityChart和IntensityChart组件 -->
      <!-- 总览视图 -->
      <div v-else-if="activeDataView === 'overview'" class="data-view overview-view">
        <!-- 概览统计卡片 -->
        <section class="dashboard-section">
          <div class="section-header">
            <h2>数据概览</h2>
          </div>
          <StatsSummary 
            :userId="selectedUserId"
            :dateRange="dateRange"
          />
        </section>
        
        <!-- 统计分析区域 -->
        <div class="dashboard-grid">
          <!-- 运动分布 -->
          <section class="dashboard-section grid-item">
            <div class="section-header">
              <h2>运动分布</h2>
              <div class="section-tabs">
                <div
                  v-for="type in chartTypes"
                  :key="type.value"
                  class="tab"
                  :class="{ active: activeChartType === type.value }"
                  @click="changeChartType(type.value)"
                >
                  {{ type.label }}
                </div>
              </div>
            </div>
            <div class="chart-wrapper">
              <ActivityChart
                :userId="selectedUserId"
                :chartType="activeChartType"
                :dateRange="dateRange"
              />
            </div>
          </section>
          
          <!-- 训练强度分布 -->
          <section class="dashboard-section grid-item">
            <div class="section-header">
              <h2>训练强度分布</h2>
              <div class="section-tabs">
                <div
                  v-for="type in intensityTypes"
                  :key="type.value"
                  class="tab"
                  :class="{ active: activeIntensityType === type.value }"
                  @click="changeIntensityType(type.value)"
                >
                  {{ type.label }}
                </div>
              </div>
            </div>
            <div class="chart-wrapper">
              <IntensityChart
                :userId="selectedUserId"
                :dateRange="dateRange"
                :chartType="activeIntensityType"
              />
            </div>
          </section>
        </div>
      </div>
      
      <!-- 趋势分析视图 -->
      <div v-else-if="activeDataView === 'trends'" class="data-view trends-view">
        <section class="dashboard-section full-width">
          <div class="section-header">
            <h2>时间趋势分析</h2>
            <div class="section-tabs">
              <div
                v-for="type in trendTypes"
                :key="type.value"
                class="tab"
                :class="{ active: activeTrendType === type.value }"
                @click="changeTrendType(type.value)"
              >
                {{ type.label }}
              </div>
            </div>
          </div>
          <div class="chart-wrapper big-chart">
            <TrendChart
              :userId="selectedUserId"
              :dateRange="dateRange"
              :dataType="activeTrendType"
            />
          </div>
        </section>
        
        <div class="trends-insight">
          <section class="dashboard-section">
            <div class="section-header">
              <h2>趋势分析</h2>
            </div>
            <div class="insight-content">
              <div class="insight-item">
                <div class="insight-icon">📆</div>
                <div class="insight-info">
                  <div class="insight-title">最佳运动日</div>
                  <div class="insight-value">星期六</div>
                </div>
              </div>
              
              <div class="insight-item">
                <div class="insight-icon">⬆️</div>
                <div class="insight-info">
                  <div class="insight-title">最大进步</div>
                  <div class="insight-value">10月22日 (10.2km)</div>
                </div>
              </div>
              
              <div class="insight-item">
                <div class="insight-icon">📈</div>
                <div class="insight-info">
                  <div class="insight-title">成长趋势</div>
                  <div class="insight-value">上升 15%</div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
      
      <!-- 强度分析视图 -->
      <div v-else-if="activeDataView === 'intensity'" class="data-view intensity-view">
        <section class="dashboard-section full-width">
          <div class="section-header">
            <h2>训练强度分析</h2>
            <div class="section-tabs">
              <div
                v-for="type in intensityTypes"
                :key="type.value"
                class="tab"
                :class="{ active: activeIntensityType === type.value }"
                @click="changeIntensityType(type.value)"
              >
                {{ type.label }}
              </div>
            </div>
          </div>
          <div class="chart-wrapper big-chart">
            <IntensityChart
              :userId="selectedUserId"
              :dateRange="dateRange"
              :chartType="activeIntensityType"
            />
          </div>
        </section>
        
        <section class="dashboard-section">
          <div class="section-header">
            <h2>心率区间详解</h2>
          </div>
          <div class="zone-descriptions">
            <div class="zone-item recovery">
              <div class="zone-name">恢复区 (&lt; 120)</div>
              <div class="zone-desc">轻度活动，适合恢复训练和热身</div>
            </div>
            <div class="zone-item aerobic">
              <div class="zone-name">有氧区 (120-140)</div>
              <div class="zone-desc">基础耐力训练，提高有氧能力</div>
            </div>
            <div class="zone-item endurance">
              <div class="zone-name">耐力区 (140-160)</div>
              <div class="zone-desc">提高心肺功能，增强耐力水平</div>
            </div>
            <div class="zone-item anaerobic">
              <div class="zone-name">无氧区 (160-180)</div>
              <div class="zone-desc">高强度训练，提高无氧阈值</div>
            </div>
            <div class="zone-item max">
              <div class="zone-name">极限区 (&gt; 180)</div>
              <div class="zone-desc">极限训练，提高速度和爆发力</div>
            </div>
          </div>
        </section>
      </div>
      
      <!-- 位置分析视图 -->
      <div v-else-if="activeDataView === 'locations'" class="data-view locations-view">
        <section class="dashboard-section full-width">
          <div class="section-header">
            <h2>运动位置分析</h2>
            <div class="section-tabs">
              <div
                v-for="view in locationViews"
                :key="view.value"
                class="tab"
                :class="{ active: activeLocationView === view.value }"
                @click="changeLocationView(view.value)"
              >
                {{ view.label }}
              </div>
            </div>
          </div>
          <div class="chart-wrapper big-chart">
            <LocationChart
              :userId="selectedUserId"
              :dateRange="dateRange"
              :viewType="activeLocationView"
            />
          </div>
        </section>
        
        <section class="dashboard-section">
          <div class="section-header">
            <h2>位置分析</h2>
          </div>
          <div class="location-insights">
            <div class="location-insight-item">
              <div class="insight-title">最常去的地点</div>
              <div class="insight-value">城市公园 (3次)</div>
            </div>
            <div class="location-insight-item">
              <div class="insight-title">挑战最大的路线</div>
              <div class="insight-value">山地公路 (平均海拔变化: 260m)</div>
            </div>
            <div class="location-insight-item">
              <div class="insight-title">效率最高的场地</div>
              <div class="insight-value">公园跑道 (配速: 5.88分钟/公里)</div>
            </div>
          </div>
        </section>
      </div>
      
      <div class="dashboard-footer">
        <p>数据来源：Keep用户运动记录 | 版本 1.1.0</p>
      </div>
    </main>
  </div>
</template>

<style scoped>
.dashboard-container {
  display: flex;
  min-height: 100vh;
}

/* 侧边导航样式 */
.dashboard-nav {
  width: 280px;
  background-color: #fff;
  border-right: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #00c25e;
  margin-right: auto;
}

.auth-container {
  margin-right: 12px;
}

.date-picker-wrapper {
  margin-top: 15px;
}

.nav-menu {
  padding: 20px 0;
}

.nav-item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-item:hover {
  background-color: #f9f9f9;
}

.nav-item.active {
  background-color: #e6f7ef;
  color: #1ac963;
  border-left: 3px solid #1ac963;
}

.nav-icon {
  margin-right: 10px;
  font-size: 18px;
}

.nav-label {
  font-size: 14px;
}

.nav-user-selection {
  flex: 1;
  overflow: hidden;
  padding: 0 15px 15px;
  display: flex;
  flex-direction: column;
}

/* 主内容区域样式 */
.dashboard-main {
  flex: 1;
  margin-left: 280px;
  padding: 30px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.dashboard-header h1 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.dashboard-controls {
  display: flex;
  gap: 15px;
}

.data-view {
  margin-bottom: 30px;
}

.platform-view {
  height: calc(100vh - 160px);
}

.dashboard-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
  padding: 20px;
  position: relative;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.section-header h2 {
  font-size: 18px;
  margin: 0;
  color: #333;
  font-weight: 600;
}

.section-tabs {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.tab {
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 13px;
}

.tab:hover {
  background-color: #e0e0e0;
}

.tab.active {
  background-color: #1ac963;
  color: white;
  font-weight: 500;
}

.chart-wrapper {
  height: 360px;
}

.big-chart {
  height: 480px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.grid-item {
  margin-bottom: 0;
}

.full-width {
  grid-column: span 2;
}

/* 趋势分析视图样式 */
.trends-insight {
  margin-top: 20px;
}

.insight-content {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.insight-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f8f8;
  flex: 1;
  min-width: 200px;
}

.insight-icon {
  font-size: 24px;
  margin-right: 12px;
}

.insight-title {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.insight-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 心率区间样式 */
.zone-descriptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zone-item {
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #ccc;
}

.zone-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
}

.zone-desc {
  font-size: 13px;
  color: #666;
}

.recovery { border-left-color: #91cc75; background-color: rgba(145, 204, 117, 0.1); }
.aerobic { border-left-color: #5470c6; background-color: rgba(84, 112, 198, 0.1); }
.endurance { border-left-color: #fac858; background-color: rgba(250, 200, 88, 0.1); }
.anaerobic { border-left-color: #ee6666; background-color: rgba(238, 102, 102, 0.1); }
.max { border-left-color: #73c0de; background-color: rgba(115, 192, 222, 0.1); }

/* 位置分析样式 */
.location-insights {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.location-insight-item {
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f8f8;
}

.dashboard-footer {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 10px 0;
  margin-top: 30px;
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .dashboard-nav {
    width: 80px;
  }
  
  .nav-label, .date-picker-wrapper, .nav-user-selection {
    display: none;
  }
  
  .dashboard-main {
    margin-left: 80px;
  }
  
  .nav-item {
    justify-content: center;
    padding: 16px 0;
  }
  
  .nav-icon {
    margin-right: 0;
    font-size: 20px;
  }
  
  .logo {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
  }
  
  .dashboard-nav {
    position: relative;
    width: 100%;
    flex-direction: row;
    height: 60px;
  }
  
  .nav-header {
    display: none;
  }
  
  .nav-menu {
    flex-direction: row;
    padding: 0;
    flex: 1;
  }
  
  .nav-item {
    flex: 1;
    padding: 0;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  
  .dashboard-main {
    margin-left: 0;
    padding: 15px;
  }
  
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .dashboard-controls {
    margin-top: 15px;
    width: 100%;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-wrapper {
    height: 300px;
  }
  
  .big-chart {
    height: 360px;
  }
}
</style>